<template>
  <div class="m-container">
    <el-divider content-position="left">
      <el-button type="primary" plain icon="el-icon-plus" @click="createTask">创建任务</el-button>
      <el-button type="success" plain icon="el-icon-refresh" @click="getTasks">刷新</el-button>
    </el-divider>
    <el-table :data="tasks" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="编号" width="50"></el-table-column>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="taskType" label="类型" width="80"></el-table-column>
      <el-table-column width="100" label="状态">
        <template #default="scope">
          <el-popover placement="right" :width="200" trigger="click" v-if="scope.row.state !== -1">
            <template #reference>
              <el-button size="mini" :type="stateType(scope.row.state).type">{{scope.row.stateName}}</el-button>
            </template>
            <div>
              <el-button size="mini" type="info" @click="changeTask(scope.row, 0)" :disabled="scope.row.state !== 2">重置</el-button>
              <el-button size="mini" type="primary" @click="changeTask(scope.row, 1)" :disabled="scope.row.state !== 0">发布</el-button>
              <el-button size="mini" type="success" @click="changeTask(scope.row, 2)" :disabled="scope.row.state !== 1">结束</el-button>
              <!-- <el-button size="mini" type="danger" v-show="scope.row.state != -1" @click="changeTask(scope.row, -1)">锁定</el-button> -->
            </div>
          </el-popover>
          <div v-if="scope.row.state === -1">
            <el-button size="mini" :type="stateType(scope.row.state).type">{{scope.row.stateName}}</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="totalWage" label="总额" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column label="进度" width="250">
        <template #default="scope">
          <el-progress :text-inside="true" :stroke-width="24" :percentage="calProcess(scope.row)" status="success"></el-progress>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button @click="taskDetail(scope.row)" type="text" size="small">详情</el-button>
          <el-button type="text" size="small" @click="deletTask(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog :title="currentTask.name" v-model="dialogVisible" width="30%" @closed="handleClose">
    <div style="height:450px">
      <el-table :data="deptItems" style="width: 100%;" height="90%" v-loading="dlgLoading">
        <el-table-column prop="deptName" label="部门"></el-table-column>
        <el-table-column prop="stateName" label="任务状态"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleReset(scope.row)">重置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {getTaskAll,changeTaskState,deleteTaskById,getDeptWagesOfTask,resetDetpTask} from '@/api/salary'
import {ElMessage,ElMessageBox} from 'element-plus'
import _ from 'lodash'
export default defineComponent({
  name:'SalaryAdmin',
  data() {
    return {
      tasks: [],
      loading: false,
      dlgLoading: false,
      dialogVisible: false,
      deptItems: [],
      currentTask: {}
    }
  },
  mounted() {
    this.getTasks()
  },
  computed: {
  },
  methods: {
    // 关闭对话框
    handleClose() {
      this.getTasks()
    },
    // 获取当前任务的部门列表
    getCurrentDeptWages() {
      let ct = this.currentTask as any
      if(!ct){
        return
      }
      getDeptWagesOfTask(ct.id).then(res => {
        this.deptItems = res.data
        console.log(res.data)
        this.dialogVisible = true
      })
    },
    // 重置部门任务
    handleReset(row: any) {
      ElMessageBox.confirm('你正在重置部门任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dlgLoading = true
          resetDetpTask(row.id).then(res => {
            let r = res as any
            if(r.code === 20000) {
              this.getCurrentDeptWages()
            }
            else{
              ElMessage.error(r.message)
            }
            this.dlgLoading = false
          })
        }).catch(() => {
          ElMessage.info('已取消重置')
        });
    },
    // 获取任务详情
    taskDetail(row: any) {
      this.currentTask = row
      this.getCurrentDeptWages()
    },
    // 获取全部任务列表
    getTasks() {
      this.loading = true
      getTaskAll().then(res => {
        this.tasks = res.data
        this.loading = false
        console.log(res.data)
      })
    },
    // 计算状态
    stateType(st: number) {
      switch(st){
        case -1: return {type: 'danger', txt: '锁定'}
        case 1: return {type: 'primary', txt: '发布中'}
        case 2: return {type: 'success', txt: '已完成'}
        default: return {type: 'info', txt: '未发布'}
      }
    },
    // 计算进度
    calProcess(row: any) {
      return Math.floor(row.finishedTaskCount / row.deptTaskCount *100)
    },
    // 修改任务状态
    changeTask(row: any, state: number) {

      let vm = this as any
      vm.$confirm('你正在修改任务状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 显示加载遮罩
        this.loading = true
        // 更改任务状态
        changeTaskState(row.id, state).then(res => {
          if((res as any).code === 20000) {
            this.getTasks()
          }
          else{
            ElMessage.error((res as any).message)
          }
          // 关闭加载遮罩
          this.loading = false
        })
      }).catch(() => {
        ElMessage.info('已取消');
      });
    },
    // 创建任务
    createTask() {
      for(let task of this.tasks){
        if((task as any).state === 1) {
          ElMessage.error('有正在发布中的工资任务，请检查后重试。')
          return
        }
      }
      this.$router.push('/task/createTask')
    },
    // 删除任务
    deletTask(row: any) {
      // 不能删除正在发布的任务
      if(row.state === 1) {
        ElMessage.warning('无法删除正在发布的任务。')
        return
      }
      // 不能删除已锁定的任务
      if(row.state === -1) {
        ElMessage.warning('无法删除已经锁定的任务。')
        return
      }
      // 确认删除
      ElMessageBox.confirm('你正在删除工资任务, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'})
      .then(() => {
        deleteTaskById(row.id).then(res => {
          console.log(res.data)
          ElMessage.success('删除工资任务成功!')
          this.getTasks()
        })
      })
      .catch(() => {})
    }
  }
})
</script>
<style scoped>
</style>
